<template>

	<div style="height: 600px; display: flex;">

		<div style="height: 600px; width: 100%; font-size: 18px; ">

			<div style="margin:auto; display: flex; justify-content: space-around;">
				<a style="font-size: 2pc;">班级显示</a>
				<button v-on:click="go2add()">添加课程 </button>
				
				
			 <div id="inputwin" v-show="bShow">
					  <hr />
					  <table align="center">
						  <tr>
							  <td>班级编号</td>
							  <td><input type="text" v-model="formObj.clzno" v-bind:readonly="actidx==0" /></td>
						  </tr>
						  
						  <tr>
							<td>班级名称</td>
							<td><input type="text" v-model="formObj.clzname" /></td>
						  </tr>
					  </table>
					  <hr />
					  <div style="display: flex; justify-content: space-between;">
						  <p>&nbsp;</p> 
						   <p><button v-on:click="save()">确定</button></p>
						  <p> <button v-on:click="bShow=false;">取消</button></p>
						
						  <p>&nbsp;</p>
					  </div>
				  </div>
				  </div>
			     
				 
				 
			<table align="center" border="1px" style="width: 100%;">
				<tr>
					<th align="center">班级id</th>
					<th align="center">班级名称</th>
					<th colspan="2" align="center">功能</th>
				</tr>

				<tr v-for="(c,idx) in clzs">
					<td align="center">{{c.clzno}}</td>
					<td align="center">{{c.clzname}}</td>
					<td align="center"><button v-on:click="gotUpdate(c)">修改</button> </td>
					<td align="center"> <button v-on:click="del(c.clzno)">删除</button></td>

				</tr>
			</table>
		</div>
	</div>
 </template>

 <script>
import axios from 'axios';
	export default {

		name: 'AdmClz',

		data() {
			return {
				formObj:{},
				clzs: [],
				bShow:false,
				actmsg:['修改','添加','显示'],
				actidx:2 
			}
		},
		methods: {
			go2add(){
					this.actidx = 1;
					this.formObj = {};
					this.bShow = true;
				console.log(this.formObj)
				
			},
			del(c){
				console.log(c);
				var that=this;
				 const token=window.localStorage.getItem("token")
				 
				this.$axios.get(`${this.$ip}/api/adm/clz/del?clzno=`+c,
				{
					headers:{'Authorization':'Bearer '+token}
				}).then(function(resp){
					that.clzs=resp.data.data
				
				})
			},
          gotUpdate(c){
            var that=this;
			this.actidx=0; 
			this.bShow=true;
			this.$axios.get(`${this.$ip}/api/adm/clz/findOne/${c.clzno}`,{
			headers:{
				'Authorization':'Bearer '+ window.localStorage.getItem("token")
				}
				}).then(function(resp){
				that.formObj=resp.data.data;
				console.log(that.formObj);
			})
			
			// this.				
		  },
		  save(){
			  var that=this;
			  let url="/api/adm/clz/add"
			  if(this.actidx==0){
				  url="/api/adm/clz/update"
			  }
			  console.log(url)
			  console.log(that.formObj)
			   var fd=new FormData();
			   
			   fd.append("clzno", that.formObj.clzno);
			   fd.append("clzname", that.formObj.clzname);
			  this.$axios.post(
			  `${this.$ip}`+url,
			  fd,
			  { 
				  headers:{
			  	'Authorization':'Bearer '+ window.localStorage.getItem("token")
			  	}
				}).then(function(resp){
				   that.bShow = false;
				   console.log(resp.data);
				   that.clzs = resp.data.data;
				  
			  })
		  }
		},
		mounted() {
			console.log(this.$ip)
			this.$get("/api/public/getClzs")
			.then((resp) => {
				this.clzs = resp.data.data;
				console.log(this.clzs)
			})
		}
	}
</script >


<style scoped="scoped">
	#inputwin {
		    border: 5px solid #2C3E50;
			position:absolute; 
			text-align: center;  
			z-index: 900;
			width: 40%;
			    line-height: 50px;
			min-height: 15vw;
			
			transform:translateY(50%);
			
			left: 40%; 
			top:  1vw;
			opacity: 0.9!important;
			background-color: skyblue;
			color:#2C3E50;
			box-shadow: 3px 3px 3px #aaa;
	}
	#inputwin input {
		line-height: 27px;
		border-radius: 8px;
		width: 80%;
	}
</style>